<!--
 * @Author: 清酒吖
 * @Date: 2022-01-25 13:59:48
 * @Email:  
 * @LastEditors:  
 * @LastEditTime: 2022-02-08 21:23:23
 * @Description: 
 * @version: x 1.0
-->
<template>
   
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float: right"
          @click="handleSearchList()"
          type="primary"
          size="small"
        >
          查询结果
        </el-button>
        <el-button
          style="float: right; margin-right: 15px"
          @click="handleResetSearch()"
          size="small"
        >
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form
          :inline="true"
          :model="listQuery"
          size="small"
          label-width="140px"
        >
          <el-form-item label="输入搜索：">
            <el-input
              style="width: 203px"
              v-model="searchMap.where.goodsName"
              clearable
              @clear="search()"
              placeholder="商品名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品货号：">
            <el-input
              style="width: 203px"
              v-model="searchMap.where.productSn"
              clearable
              @clear="search()"
              placeholder="商品货号"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品分类：">
            <el-cascader
              clearable
              @clear="search()"
              :props="{ checkStrictly: true }"
              v-model="selectProductCateValue"
              :options="productCateOptions"
              @change="selectCat()"
            >
            </el-cascader>
          </el-form-item>
          <el-form-item label="商品品牌：">
            <el-select
              v-model="searchMap.where.brandId"
              placeholder="请选择品牌"
              clearable
              @clear="search()"
            >
              <el-option
                v-for="item in brandOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上架状态：">
            <el-select
              v-model="searchMap.where.isMarketable"
              placeholder="全部"
              clearable
              @clear="search()"
            >
              <el-option
                v-for="shelves in isMarketableOptions"
                :key="shelves.dicId"
                :label="shelves.dicName"
                :value="shelves.dicId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="审核状态：">
            <el-select
              v-model="searchMap.where.auditStatus"
              placeholder="全部"
              clearable
              @clear="search()"
            >
              <el-option
                v-for="(dic, index) in AuditStatusOptions"
                :key="index"
                :label="dic.dicName"
                :value="dic.dicId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <el-button class="btn-add" @click="handleAddProduct()" size="mini">
        添加
      </el-button>
      <el-button
        class="btn-add"
        @click="removeBatch()"
        size="mini"
        type="danger"
        round
      >
        批量删除
      </el-button>
    </el-card>
    <div class="table-container">
      <!-- 表格数据渲染 -->
      <el-table
        ref="productTable"
        :data="list"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        v-loading="false"
        border
      >
        <el-table-column
          type="selection"
          width="60"
          align="center"
        ></el-table-column>
        <el-table-column label="编号" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.spuId }}</template>
        </el-table-column>
        <el-table-column label="商品图片" width="120" align="center">
          <template slot-scope="scope"
            ><img style="height: 80px" :src="scope.row.albumPics | picFormat"
          /></template>
        </el-table-column>
        <el-table-column label="商品名称" align="center">
          <template slot-scope="scope">
            <!-- 商品名称 -->
            <el-tooltip :content="scope.row.goodsName" placement="top">
              <el-button>{{ scope.row.goodsName | titleFormat }}</el-button>
            </el-tooltip>
            <p></p>
            <p>品牌：{{ scope.row.bname }}</p>
          </template>
        </el-table-column>
        <el-table-column label="价格/货号" width="120" align="center">
          <template slot-scope="scope">
            <p>价格：￥{{ scope.row.price }}</p>
            <p>货号：{{ scope.row.productSn }}</p>
          </template>
        </el-table-column>
        <el-table-column label="标签" width="140" align="center">
          <template slot-scope="scope">
            <p>
              上架：
              <el-switch
                @change="handlePublishStatusChange(scope.$index, scope.row)"
                :active-value="1"
                :inactive-value="0"
                v-model="scope.row.publishStatus"
              >
              </el-switch>
            </p>
            <p>
              新品：
              <el-switch
                @change="handleNewStatusChange(scope.$index, scope.row)"
                :active-value="1"
                :inactive-value="0"
                v-model="scope.row.newStatus"
              >
              </el-switch>
            </p>
            <p>
              推荐：
              <el-switch
                @change="handleRecommendStatusChange(scope.$index, scope.row)"
                :active-value="1"
                :inactive-value="0"
                v-model="scope.row.recommandStatus"
              >
              </el-switch>
            </p>
          </template>
        </el-table-column>
        <el-table-column label="排序" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.sort }}</template>
        </el-table-column>
        <el-table-column label="SKU库存" width="100" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              @click="handleShowSkuEditDialog(scope.$index, scope.row)"
              circle
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column label="销量" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.sale }}</template>
        </el-table-column>
        <el-table-column label="审核状态" width="100" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.verifyStatus | verifyStatusFilter }}</p>
            <p>
              <el-button
                type="text"
                @click="handleShowVerifyDetail(scope.$index, scope.row)"
                >审核详情
              </el-button>
            </p>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160" align="center">
          <template slot-scope="scope">
            <p>
              <el-button
                size="mini"
                @click="handleShowProduct(scope.$index, scope.row)"
                >查看
              </el-button>
              <el-button
                size="mini"
                @click="handleUpdateProduct(scope.$index, scope.row)"
                >编辑
              </el-button>
            </p>
            <p>
              <el-button
                size="mini"
                @click="handleShowLog(scope.$index, scope.row)"
                >日志
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除
              </el-button>
            </p>
          </template>
        </el-table-column>
      </el-table>
      <br />

      <!-- 分页 -->
      <el-pagination
        style="float: right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchMap.pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="searchMap.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { catcCscader } from "@/api/cat";
import { findBrand } from "@/api/mallGoodsBrand";
import { selectBasicDic } from "@/api/dic";
import { findGoodsList, deleteGoods } from "@/api/goodsList";
const defaultListQuery = {
  keyword: null,
  pageNum: 1,
  pageSize: 5,
  publishStatus: null,
  verifyStatus: null,
  productSn: null,
  productCategoryId: null,
  brandId: null,
};
export default {
  name: "productList",
  data() {
    return {
      editSkuInfo: {
        dialogVisible: false,
        productId: null,
        productSn: "",
        productAttributeCategoryId: null,
        stockList: [],
        productAttr: [],
        keyword: null,
      },
      operates: [
        {
          label: "商品上架",
          value: "publishOn",
        },
        {
          label: "商品下架",
          value: "publishOff",
        },
        {
          label: "设为推荐",
          value: "recommendOn",
        },
        {
          label: "取消推荐",
          value: "recommendOff",
        },
        {
          label: "设为新品",
          value: "newOn",
        },
        {
          label: "取消新品",
          value: "newOff",
        },
        {
          label: "转移到分类",
          value: "transferCategory",
        },
        {
          label: "移入回收站",
          value: "recycle",
        },
      ],
      operateType: null,
      listQuery: Object.assign({}, defaultListQuery),
      list: null,
      total: null,
      pages: null,
      listLoading: true,
      selectProductCateValue: [],
      multipleSelection: [],
      productCateOptions: [],
      brandOptions: [],
      publishStatusOptions: [
        {
          value: 1,
          label: "上架",
        },
        {
          value: 0,
          label: "下架",
        },
      ],
      verifyStatusOptions: [
        {
          value: 1,
          label: "审核通过",
        },
        {
          value: 0,
          label: "未审核",
        },
      ],
      AuditStatusOptions: [], // * 审核状态数组
      isMarketableOptions:[], // * 上架状态数组
      searchMap: {
        pageNum: 1, // * 当前页数
        pageSize: 5, // * 当前页记录数
        where: {
          goodsName: "",
        },
      },
      ids: [], // 删除id数组
    };
  },
  methods: {
    // * 每页显示记录数
    handleSizeChange(pageSizeNow) {
      // -> 监听当前页显示条数的变化
      console.log(pageSizeNow);
      this.searchMap.pageSize = pageSizeNow;
      this.search();
    },
    // * 分页
    handleCurrentChange(pageNumNow) {
      //-> 监听当前页的变化
      console.log(pageNumNow);
      this.searchMap.pageNum = pageNumNow;
      this.search();
    },
    // * 条件+分页查询所有商品信息
    search() {
      // * 与服务器交互，调用查询方法接口
      findGoodsList(this.searchMap).then((res) => {
        this.pages = res.pages;

        this.total = res.total;

        this.list = res.pageList;
      });
    },
    // * 商品分类change事件
    selectCat() {
      this.searchMap.where.category1Id = 0;
      this.searchMap.where.category2Id = "";
      this.searchMap.where.category3Id = "";
      // 分类
      switch (this.selectProductCateValue.length) {
        case 0:
          this.searchMap.where.category1Id = 0;
          break;
        case 1:
          this.searchMap.where.category1Id = this.selectProductCateValue[0];
          break;
        case 2:
          this.searchMap.where.category1Id = this.selectProductCateValue[0];
          this.searchMap.where.category2Id = this.selectProductCateValue[1];
          break;
        case 3:
          this.searchMap.where.category1Id = this.selectProductCateValue[0];
          this.searchMap.where.category2Id = this.selectProductCateValue[1];
          this.searchMap.where.category3Id = this.selectProductCateValue[2];
        default:
          break;
      }
    },
    // * 点击搜索按钮
    handleSearchList() {
      this.pageNum = 1;
      this.search();
    },
    // * 重置搜索
    handleResetSearch() {
      this.searchMap = {
        pageNum: 1, // * 当前页数
        pageSize: 5,
        where: {}, // * 查询条件
      };
      (this.selectProductCateValue = []), // 将分类数组清空
        this.search();
    },
    // * 添加商品
    handleAddProduct() {
      // 跳转到商品添加页面
      this.$router.push({ path: "/goods/goods-add" });
    },
    // 查询审核状态
    handleShowVerifyDetail(index, info) {
      console.log(index);
      console.log(info);
      var auditStatusName = this.AuditStatusOptions[info.auditStatus];
      console.log(auditStatusName.label);

      // this.$alert(auditStatusName.label, '审核状态', {
      //     confirmButtonText: '确定',
      //     center:true,
      //     callback: action => {
      //       this.$message({
      //         type: 'info',
      //         message: `action: ${ action }`
      //       });
      //     }
      //   });

      this.$alert("<strong><i>"+auditStatusName.label+"</i></strong>", "审核状态", {
        dangerouslyUseHTMLString: true,
      });


    },

    // 选中表格
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 删除
    handleDelete(index, info) {
      this.ids.push(info.spuId);
      this.removeGoods();
    },
    // 批量删除
    removeBatch() {
      this.multipleSelection.forEach((item) => {
        this.ids.push(item.spuId);
      });
      this.removeGoods();
    },

    // 删除方法
    removeGoods() {
      this.$confirm("此操作将永久删除该商品信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // -> 与服务器交互，调用删除方法接口
          deleteGoods(this.ids).then((res) => {
            if (res.success) {
              this.$notify({
                title: "成功",
                message: res.msg,
                type: "success",
                duration: 3000,
              });
              this.searchMap.pageNum = 1;
              this.search();
              this.ids = [];
            } else {
              this.$notify.error({
                title: "失败",
                message: res.msg,
                type: "success",
                duration: 3000,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },

  filters: {
    // *  图片过滤
    picFormat(source) {
      var arr = source.split(",");
      return arr[0];
    },

    // * 名称标题过滤
    titleFormat(source) {
      var index = source.indexOf("【");
      if (index == -1) {
        return source.substring(0, 4) + "...";
      }
      return source.substring(0, index);
    },
  },
  created() {
    // * 级联查询所有商品分类
    catcCscader().then((res) => {
      this.productCateOptions = res.data;
    });

    // * 获取所有的商品品牌
    findBrand().then((res) => {
      this.brandOptions = res.data;
    });

    // * 查询所有的审核状态
    let dicName = "审核状态";
    selectBasicDic(dicName).then((res) => {
      console.log(res.data);
      res.data.forEach((item) => {
        this.AuditStatusOptions.push(item);
      });
    });

    // * 查询所有的上架状态
    let shelvesName = "上架状态"
    selectBasicDic(shelvesName).then((res) => {
      console.log("=====================");
      console.log(res.data);
      res.data.forEach((item) => {
        this.isMarketableOptions.push(item);
      })
    });
    this.search();
  },
};
</script>
<style></style>


